<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <title>Vite App</title>
  </head>
  <body>

  <div id="app">
    <div style="width: 140px;height: 140px;">
    <div :style="{color:defaultColor,fontSize:selfFontSize+'px'}">
       {{selfFontSize}}
    </div>
  </div>

    change size:<input type="range" :value="selfFontSize" @change="changeSize($event)">
    <div>
      change color:
      <span v-for="color in selfColor">
        <input type="radio" name="cc" :value="color"
        v-model="defaultColor">{{color}}
      </span>
    </div>
  </div>

  <script>
    const app={
        data(){
            return{
                selfColor:['red','blue','green'],
                defaultColor:'red',
                selfFontSize:50,
            }
        },
        methods:{
          changeSize:function(e){
            console.log("changeSize:",e.target.value)
         this.selfFontSize = e.target.value
          }
        }
    }
    Vue.createApp(app).mount('#app')
  </script>
  </body>
</html>